<!-- @format -->

<template>
  <div id="app">
    <h3>折叠面板</h3>
    <!-- 
      4. 使用组件 
      把注册时候的组件名当做自定义标签使用
    -->
    <MyPanel></MyPanel>
    <MyPanel />
  </div>
</template>

<script>
  // 2. 导入组件
  // 注意：导入的时候.vue扩展名可以省略
  import MyPanel from './components/MyPanel.vue'
  export default {
    // 3. 注册组件(局部注册)
    // 3.1 推荐键和值名字一样，所以只写一个
    // 3.2 局部注册的组件，仅在当前.vue文件中可用
    components: {
      // 组件名: 组件对象
      MyPanel
    }
  }
</script>

<style lang="less">
  body {
    background-color: #ccc;
    #app {
      width: 400px;
      margin: 20px auto;
      background-color: #fff;
      border: 4px solid blueviolet;
      border-radius: 1em;
      box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
      padding: 1em 2em 2em;
      h3 {
        text-align: center;
      }
    }
  }
</style>
